@import '~cpaas-front/lib/assets/styles/utils.less'; // 相对路径
@import './config.less';

.dynamic-config {
  height: 100%;

  background-color: #fafafa;

  padding: 10px;
  flex: auto;

  display: flex;
  flex-wrap: nowrap;

  > div {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #e8e8e8;
    //box-shadow: #fafafa;

    overflow-y: auto;
  }

  .pick-box-panel {
    width: @leftComponentWidth;
    min-width: @leftComponentWidth;

    :global {
      .pick-box-panel {
        &-item {
          float: left;
          width: 60px;
          height: 60px;
          text-align: center;
          cursor: pointer;

          display: flex;
          flex-direction: column;
          justify-content: center;

          &:hover {
            background-color: #eee;
          }

          h3 {
            margin: 0;
            padding: 0;
            font-size: 12px;
            .textOverflow();
          }
        }
      }
    }
  }

  .designer-panel {
    flex: auto;
    margin: 0 10px;
  }

  .prop-panel {
    width: @rightPropWidth;
    min-width: @rightPropWidth;
  }

  :global {
    .input {
      appearance: none;
      font-family: 'Monospaced Number', 'Chinese Quote', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue',
        Helvetica, Arial, sans-serif;
      box-sizing: border-box;
      margin: 0;
      list-style: none;
      position: relative;
      display: inline-block;
      padding: 4px 11px;
      width: 100%;
      height: 28px;
      font-size: 12px;
      line-height: 1.5;
      color: #333;
      background: #fff none;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
      transition: all 0.3s;
    }
  }
}

.page-func-modal {
  display: flex;

  &-table {
    width: 400px;
    margin-right: 10px;

    &-operator {
      text-align: right;
      margin-bottom: 10px;
    }
  }

  &-script-modal {
    flex-basis: auto;
    border: 1px solid #e7e7e7;
  }

  .active-table-row {
    background: #a8d0c1;
  }

  .tag-a-disabled {
    color: #aaa;
  }

  .table-row-operator {
    text-align: center;

    a {
      margin-right: 8px;
    }
  }
}

.full-width {
  width: 100%;
}
